<!-- 传值方式 -->
<template>
  <navBar
    ref="RefTestComponent"
    :title="'传值方式'"
    :leftText="leftText"
    :rightText="rightText"
    @getValue="getsonemitfn"
  ></navBar>
  <main>
    <div class="test-vw">
      <button @click="modifyClick">按钮-修改navbar文字(父向子传值)</button>
      <button @click="usesonfn">按钮-调用子组件方法和数据</button>
      <p>接收来自子组件的信息: {{ sonMsg }}</p>
    </div>
  </main>
</template>
<script setup lang="ts">
import navBar from './components/navBar.vue'
import { ref, computed, reactive } from 'vue'
let leftText = ref('')
let rightText = ref('')
let sonMsg = ref('')
//父子传值
const modifyClick = () => {
  leftText.value = '返回'
  rightText.value = '父向子传递数据'
}
//父组件调用子组件方法和获取子组件定义的数据
const RefTestComponent = ref(null)
const usesonfn = () => {
  RefTestComponent.value.testsonfFn()
  console.log(RefTestComponent.value.sonState, '333')
}
//接收来自子组件的消息数据等
const getsonemitfn = (val: any) => {
  console.log(val, '333')
  sonMsg.value = val
}
</script>
<style scoped>
.test-vw {
  width: 375px;
  height: 100vh;
  padding: 12px 16px 0 16px;
}
</style>
